<template>
	<view>
		<!-- 吸顶 -->
		<u-sticky>
			<view class="carDetail">

				<!-- {{trainNumberData.startTime}} -->
				<!-- 开始的地点-时间 日期 -->
				<view class="startInfo trainItem">
					<text class="city">{{trainNumberData.startCity}}</text>
					<text class="time">{{trainNumberData.startTime}}</text>
					<text class="dates">{{trainNumberData.date}}</text>
				</view>
				<!-- 耗时 和 车次、 -->
				<view class="trainnumber trainItem">
					<text>{{trainNumberData.allTimes}}</text>
					<text>时刻表</text>
					<text class="dates">{{trainNumberData.allTimes}}</text>
				</view>
				<!-- 结束时间 地点 日期 -->
				<view class="endInfo trainItem">
					<text class="city">{{trainNumberData.endCity}}</text>
					<text class="time">{{trainNumberData.endTime}}</text>
					<text class="dates">{{trainNumberData.date}}</text>
				</view>
			</view>
		</u-sticky>

		<!-- 折叠慢板 -->

		<u-collapse @change="change" @close="close" @open="open" accordion>

			<u-collapse-item title="二等座" value="5张" label="￥49.5">
				<uni-list>
					<uni-list-item title="快速预定" note="含40元出行保障,快速出票,迅捷无忧">
						<template v-slot:footer>
							<text class="sale"  @click="toOrderFilling">买票</text>
						</template>
					</uni-list-item>
					<uni-list-item title="普通预定" note="出票较慢,高峰期需要排队"><template v-slot:footer>
							<text class="sale">买票</text>
						</template></uni-list-item>

				</uni-list>
			</u-collapse-item>
			<u-collapse-item title="一等座" value="有票" label="￥109.5">
				<uni-list>
					<uni-list-item title="快速预定" note="含40元出行保障,快速出票,迅捷无忧">
						<template v-slot:footer>
							<text class="sale" @click="toOrderFilling">买票</text>
						</template>
					</uni-list-item>
					<uni-list-item title="普通预定" note="出票较慢,高峰期需要排队"><template v-slot:footer>
							<text class="sale">买票</text>
						</template></uni-list-item>

				</uni-list>
			</u-collapse-item>
			<u-collapse-item title="商务座" value="有票" label="￥209.5">
				<uni-list>
					<uni-list-item title="快速预定" note="含40元出行保障,快速出票,迅捷无忧">
						<template v-slot:footer>
							<text class="sale">买票</text>
						</template>
					</uni-list-item>
					<uni-list-item title="普通预定" note="出票较慢,高峰期需要排队"><template v-slot:footer>
							<text class="sale">买票</text>
						</template></uni-list-item>

				</uni-list>
			</u-collapse-item>
		</u-collapse>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				trainNumberData: {}
			};
		},
		onLoad(options) {

			console.log("接受参数", options);
			// 先解密
			let codeString = decodeURIComponent(options.trainDetail)
			// 再转回对象
			let par = JSON.parse(codeString)
			console.log(par);
			// 赋值
			this.trainNumberData = par
			// console.log(this.trainNumberData);
		},
		methods: {
			// 折叠面板开关改变
			open(e) {
				console.log('open', e)
			},
			close(e) {
				console.log('close', e)
			},
			change(e) {
				console.log('change', e)
			},
			// 跳转到订单填写页面
			toOrderFilling(){
				let jsonData = JSON.stringify(this.trainNumberData)
				let codeString = encodeURIComponent(jsonData)
				uni.navigateTo({
					url:"/pages/index/OrderFilling/OrderFilling?trainDetail="+codeString
				})
			}
		}
	}
</script>

<style lang="less">
	// 列车信息样式
	.carDetail {
		width: 100%;
		height: 300rpx;
		background-color: aliceblue;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.trainItem {
			width: 200rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			line-height: 60rpx;
		}

		.city {
			font-size: 40rpx;
		}

		.time {
			font-size: 40;
			font-weight: 700;
		}

		.dates {
			color: #666;
			font-size: 25rpx;
		}

	}
// 折叠面板样式
	.sale {
		color: orange;
		border: 1px orange solid;
		display: flex;
		align-items: center;
		padding: 15rpx;
		border-radius: 15rpx;
	}

	.sale:hover {
		background-color: antiquewhite;
	}
</style>
